<template>
  <div class="content">
      <div>
          <van-nav-bar class="nav-bar-style" left-arrow @click-left="onClickLeft">
              <template #title>
                  <div class="nav-bar-title-style">{{title}}</div>
              </template>
              <template #left>
                  <van-icon size="30" name="arrow-left" color="#FFF" />
              </template>
          </van-nav-bar>
      </div>
      <!-- search -->
      <div class="searchCont">
          <van-search v-model="conditionSearch" placeholder="请输入搜索关键词" @keypress="tapToSearch"/>
      </div>
  </div>
</template>

<script>
  import router from "@/router";
  export default{
    data() {
      return{
        conditionSearch: ''
      }
    },
    props:{
      title:{
        type:String
      }
    },
    watch:{
      conditionSearch(newData){
        if(!newData){
          this.$emit('getInStorageList',newData)
        }
      }
    },
    methods:{
      onClickLeft() {
        router.push({path:'/Navagation'});
      },
      tapToSearch(event){
        if(event.keyCode===13){
          this.$emit('getInStorageList',this.conditionSearch)
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .nav-bar-title-style {
    font-size: 22px;
    text-align: center;
    font-family: PingFangSC-Regular;
    color: #fff;
    margin-right: 62px;
  }
  .nav-bar-style {
    background: #2E71FF;
    color: #fff;
  }
  .searchCont{
    display: flex;
    align-items: center;
    height: 70px;
    background-color: #F6F6F6;
  }
  .van-search{
    width: 90%;
    margin: auto;
    background-color: #F6F6F6;
  }
  .van-search__content{
    background-color: #E8E8E8;
    border-radius: 20px;
  }
  /deep/ .van-icon{
    font-size: 25px;
  }
</style>
